<template>
    <view>
		<!-- <view class="img2">lkajsflkfjs</view> -->
		<!-- <gz-image-rotate ref="gzImageRotate" @success="success"></gz-image-rotate> -->
		<view v-if="!user_accept">
			<pop
				ref="pop" 
				direction="center" 
				:is_close="false"
				:is_mask="true" 
				:maskFun="false"
				:width="90"  
				height="fit-content" 
				@watchOpen="watchOpen" 
				@watchClose="watchClose"
			>
				<!-- <view class="" v-for="t in 10">我是弹窗{{t}}</view> -->
				<view class="pop-wrap">
					<view class="pop-title" @click="log">
						培训报名协议
					</view>
					<view class="pop-content">
						进行下一步操作前, 请点击进入以下各项协议的详情页面, 并仔细阅读各项条款.
					</view>
				</view>
				<view class="uni-list">
					<checkbox-group @change="checkboxChange">
						<view class="agreement_radio" v-if='false'>
							<checkbox :value='checkValue' :checked="checked" disabled="true"/>
							<text class="text_left"  @click="a_click">这一行不加有bug《checkedcheckedchecked》</text>
						</view>
						<view class="agreement_radio" @click="a_click">
							<checkbox :value='a_v' :checked="a_c" disabled="true"/>
							<text class="text_left">已阅读并同意<text class="my_href">《{{a_title}}》</text> </text>
						</view>
						<view class="agreement_radio" @click="b_click">
							<checkbox :value='b_v' :checked="b_c" disabled="true"/>
							<text class="text_left">已阅读并同意<text class="my_href">《{{b_title}}》</text> </text>
						</view>
						<view class="agreement_radio" @click="c_click">
							<checkbox :value='c_v' :checked="c_c" disabled="true"/>
							<text class="text_left">已阅读并同意 <text class="my_href">《{{c_title}}》</text> </text>
						</view>
					</checkbox-group>
					
				</view>
				
				<view class="pop-buttons" style="display: flex;">
					<button @click="accept(1)">接受</button>
					<button @click="reject(1)">拒绝</button>
				</view>
			</pop> 
		</view>
		<view v-else>
			<image class="img2" src="../../static/images/fontDirection.png"></image>
			<htz-signature class="sign" @sumbit="sumbit"  @fail="fail" cid="ceshi1"></htz-signature>
		</view>
    </view>
</template>
<script>
    import htzSignature from '@/components/htz-signature/htz-signature.vue'
	// import gzImageRotate from '@/components/gz-image-rotate/gz-image-rotate.vue'
    import pop from "@/components/ming-pop/ming-pop.vue";
	
    export default {
        data() {
            return {
				// region --- pop ---
				user_accept: false,
				// 必须有checked变量, 不然bug
				checked: false,
				checkValue: '0',
				
				
				a_v:'a',
				a_c:false,
				a_title: '报名须知承诺书',
				
				b_v: 'b',
				b_c: false,
				b_title: '个人健康承诺书',
				
				c_v: 'c',
				c_c: false,
				c_title: '个人学历承诺书',
				
				click_dc: {
					'a_click_key': false,
					'b_click_key': false,
					'c_click_key': false,
				},
				// --- endregion
            }
        },
        components: {
            htzSignature,
			// gzImageRotate,
			pop,
        },
        mounted() {
            this.$nextTick(function() {
            });
        },
		onLoad(option) {
			this.$refs.pop.show();
			
			console.log('onLoad option -------------- ', option);
			this.option = option;
			
		},
		onShow(){
			this.log();
		},
        methods: {  
			log(){
				let pages = getCurrentPages();
				let currPage = pages[pages.length-1];
				var key_ls = Object.keys(this.click_dc);
				for (var i in key_ls){
					var k = key_ls[i];
					if(typeof(currPage.data[k]) != undefined && currPage.data[k] != null){
						this.click_dc[k] = currPage.data[k];
					}
				}
				
				for(var k in this.click_dc){
					var v = this.click_dc[k];
					var kk = k.substring(0, 1) + '_c';
					
					if (v == '1'){
						this[kk] = true;
					}
					else {
						this[kk] = false;
					}
				}
			},
			watchOpen(){},
			watchClose(){},
			
			accept(i){
				if (this.a_c != '1'){
					uni.showToast({
						title: '没有同意《' + this.a_title + '》!',
						icon: 'none'
					})
					return;
				}
				if (this.b_c != '1'){
					uni.showToast({
						title: '没有同意《' + this.b_title + '》!',
						icon: 'none'
					})
					return;
				}
				if (this.c_c != '1'){
					uni.showToast({
						title: '没有同意《' + this.c_title + '》!',
						icon: 'none'
					})
					return;
				}
				
				uni.showToast({
					title: 'success!',
				})
				
				setTimeout(() => {
					console.log('~~~~~~~~~ success!')
				}, 400)
				
				if(1){
					uni.showModal({
						title: '注意事项',
						content: '为了报名成功, \r\n需要横向的手写电子签名! \r\n签名前请将手机先横过来, 按照方向箭头提示签字.',
						// confirmText: "否", 
						showCancel: false,
						
						cancelText: "是",
						success: function(res) {
							console.log('~~~~~~~~~~~ success ', res);
							return
						},
						fail: function(res) {
							console.log('!!!!!!!!!!!!! fail', res);
						}
					});
				}
				this.user_accept = true;
			},
			reject(i){
				uni.navigateBack();
			},
			
			checkboxChange(e){
				// 用列表有bug... 只能用if来写了, 凸(艹皿艹 )
				console.log(e.detail.value,'++++');
				if(e.detail.value=='0'){
					this.a_c = true
				}
				else{
					this.a_c = false
				}
				
				if(e.detail.value=='a'){
					this.a_c = true
				}
				else{
					this.a_c = false
				}
				
				if(e.detail.value=='b'){
					this.b_c = true
				}
				else{
					this.b_c = false
				}
				
				if(e.detail.value=='c'){
					this.c_c = true
				}
				else{
					this.c_c = false
				}
			},
			
			a_click() {
				var key = 'a_click';
				key += '_key';
				var url = "../show/show?key=" + key;
				// 跳转到pdf展示页面
				uni.navigateTo({
					url: url,
				});
			},
			b_click() {
				var key = 'b_click';
				key += '_key';
				var url = "../show/show?key=" + key;
				// 跳转到pdf展示页面
				uni.navigateTo({
					url: url,
				});
			},
			c_click() {
				var key = 'c_click';
				key += '_key';
				var url = "../show/show?key=" + key;
				// 跳转到pdf展示页面
				uni.navigateTo({
					url: url,
				});
			},
			// success(e){
			// 	console.log('******* e.tempFilePath', e.tempFilePath)
			// 	// uni.saveImageToPhotosAlbum({
			// 	//  filePath:e.tempFilePath
			// 	// })
			// },
            sumbit(res){
                console.log('sumbit',res);
                try {
					/* 返回调用页面并把图片URL传递过去 */
					let pages = getCurrentPages();
					let prevPage = pages[pages.length - 2]; 
					let key = this.option.key;
					if(!key)
						key = 'aaaaaaaaaaaa';
					var dc = {[key]: res.tempFilePath};
					// console.log('dc ~~~~~~~ ', dc);
					// this.$refs.gzImageRotate.start(res.tempFilePath, 3);
					
					// uni.canvasToTempFilePath(object, component)
					
					console.log('~~~~~~~~ canvasToTempFilePath ~~~~~~~~~~~~~')
					// uni.canvasToTempFilePath({
					// 	fileType: "jpg",
					// 	canvasId: 'canvasLineA',
					// 	success: function(res) {
					// 		// 在H5平台下，tempFilePath 为 base64
					// 		console.log('tempFilePath ===== ', res.tempFilePath)
							
					// 		uni.saveImageToPhotosAlbum({
					// 			filePath: res.tempFilePath,
					// 			success: function() {
					// 				uni.showToast({
					// 					icon: 'none',
					// 					position: 'bottom',
					// 					title: "图片已下载至【图库】，请打开【图库】查看", // res.tempFilePath
					// 				});
					// 			}
					// 		});
					// 	}
					// })
					
					
					if(prevPage)
						prevPage.setData(dc);
					
                    uni.navigateBack();
                } catch (e) {
                    // error
					console.log('catch e ~~~~~~~~~', e)
                }
            },
            fail(err){
                console.log('fail --------', err)
            },
			
			exportImg() {
				uni.canvasToTempFilePath({
					fileType: "jpg",
					canvasId: 'canvasLineA',
					success: function(res) {
						// 在H5平台下，tempFilePath 为 base64
						console.log(res.tempFilePath)
		
						uni.saveImageToPhotosAlbum({
							filePath: res.tempFilePath,
							success: function() {
								uni.showToast({
									icon: 'none',
									position: 'bottom',
									title: "图片已下载至【图库】，请打开【图库】查看", // res.tempFilePath
								});
							}
						});
					}
				})
			}
        }
    }
</script>

<style lang="scss">  
  .img2{
	height: 120upx;
  	z-index:2;
	// opacity: 0.5;
	// transform:rotate(90deg);
  }
  
  
	.agreement_radio {
		display: flex;
		margin-top: 10rpx;
		margin-left: 10rpx;
		margin-bottom: 20rpx;
	}
	.pop-buttons {
		margin-top: 20rpx;
		margin-left: 10rpx;
	}
	.my_href{
		color: #1212be;
		box-sizing: border-box;
		border-bottom: 2rpx solid #007AFF;
	}
	.pop-title{
		height: 30px;
		line-height: 30px;
		color: #000;
		font-size: 48upx;
		font-weight: bold;
		text-align: center;
		letter-spacing: 20px;
		
		/* background: ; */
		/* background-color: $interval-color; */
		
		margin: 10rpx 0;
	}
	.pop-content {
		// padding-left: 80rpx;
		text-indent: 40rpx;
	}
</style> 
  